<template>
	<view> 
	
		<view class="tabbar-title" v-if="elevatorType == 1">
			<v-tabs class="tabs" v-model="activeTab" :scroll="false" :tabs="tabs" @change="changeTab"></v-tabs>
		</view>
		<!-- 机房 -->
		<view class="root" v-if="elevatorType == 1">
			<uni-card>
				<!-- 机房、滑轮间环境 -->
				<view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
					<view class="machine">
						<view class="">
							<image src="../../../static/img/straightLadder/show2.png" mode=""></image>
							<text class="machine-name">
								{{item.projectName}}
							</text>
						</view>
						<!-- 开关 -->
						<switch v-if="item.upkeepResult == 2" @change="switch1Change(item.recordId)" />
						<switch v-if="item.upkeepResult == 1" checked @change="switch1Change(item.recordId)" />
					</view>
					<view class="remind">
						{{item.projectRequire}}
					</view>  
				</view>
			</uni-card>
			<block v-if="indexs == 0">
				<uni-card>
					<view class="comment">
						<fuck-textarea v-model="roomRemark" placeholder="备注:" maxlength="100"></fuck-textarea>
					</view>
				</uni-card>
				<!-- 图片 -->
				<view class="upimage">
					<image class="img" :src="roomImg || '../../../static/img/detailsMsg/images.png'" mode="" @click="roomImgs"></image>
				</view>
			</block>
			<!-- 层站 -->
			<block v-else-if="indexs == 1">
				<uni-card>
					<view class="comment">
						<fuck-textarea v-model="floorRemark" placeholder="备注:" maxlength="100"></fuck-textarea>
					</view>
				</uni-card>
				<!-- 图片 -->
				<view class="upimage">
					<image class="img" :src="floorImg || '../../../static/img/detailsMsg/images.png'" mode="" @click="floorImgs"></image>
				</view>
			</block>
			<!-- 桥箱 -->
			<block v-else-if="indexs == 2">
				<uni-card>
					<view class="comment">
						<fuck-textarea v-model="capsulesRemark" placeholder="备注:" maxlength="100"></fuck-textarea>
					</view>
				</uni-card>
				<!-- 图片 -->
				<view class="upimage">
					<image class="img" :src="capsulesImg || '../../../static/img/detailsMsg/images.png'" mode="" @click="capsulesImgs"></image>
				</view>
			</block>
			<block v-else-if="indexs == 3">
				<uni-card>
					<view class="comment">
						<fuck-textarea v-model="shaftRemark" placeholder="备注:" maxlength="100"></fuck-textarea>
					</view>
				</uni-card>
				<!-- 图片 -->
				<view class="upimage">
					<image class="img" :src="shaftImg || '../../../static/img/detailsMsg/images.png'" mode="" @click="shaftImgs"></image>
				</view>
			</block>
			<!-- 签名 -->
			<uni-card>
				<view class="" @touchmove.prevent.stop="">
					<view class="tipText textleft">签字</view>
					<canvas class="canvasHimc mycanvasAdmin" canvas-id="mycanvasAdmin" @touchstart="touchstart($event,'mycanvasAdmin')"
					 @touchmove.prevent.stop="touchmove" @touchend="touchend"></canvas>
					 <view class="flexBottom">
					 	
					 	<view class="" @click="clear('mycanvasAdmin')">清除</view>
					 	<view class="" @click="rescueComplet">保存 </view>
					 </view>
				</view>
			</uni-card>
			<button type="default" @click="submitMaintain">提交</button>
		</view>
		<view class="root" style="margin-top: 20px;" v-if="elevatorType == 2">
			<uni-card>
				<!-- 机房、滑轮间环境 -->
				<view class="machine-div" v-for="(item,index) in machineList" :key="item.id">
					<view class="machine">
						<view class="">
							<image src="../../../static/img/straightLadder/show2.png" mode=""></image>
							<text class="machine-name">
								{{item.projectName}}
							</text>
						</view>
						<!-- 开关 -->
						<switch v-if="item.upkeepResult == 2" @change="switch1Change(item.recordId)" />
						<switch v-if="item.upkeepResult == 1" checked @change="switch1Change(item.recordId)" />
					</view>
					<view class="remind">
						{{item.projectRequire}}
					</view>
				</view>
			</uni-card>
			<uni-card>
				<view class="comment">
					<fuck-textarea v-model="roomRemark" placeholder="备注:" maxlength="100"></fuck-textarea>
				</view>
			</uni-card>
			<!-- 图片 -->
			<view class="upimage">
				<image class="img" :src="roomImg || '../../../static/img/detailsMsg/images.png'" mode="" @click="roomImgs"></image>
			</view>
			<!-- 签名 -->
			<uni-card>
				<view class="" @touchmove.prevent.stop="">
					<view class="tipText textleft">签字</view>
					<canvas class="canvasHimc mycanvasAdmin" canvas-id="mycanvasAdmin" @touchstart="touchstart($event,'mycanvasAdmin')"
					 @touchmove.prevent.stop="touchmove" @touchend="touchend"></canvas>
					 <view class="flexBottom">
					 	<view class="" @click="clear('mycanvasAdmin')">清除</view>
					 	<view class="" @click="rescueComplet">保存</view>
					 </view>
				</view>
			</uni-card>
			<button type="default" @click="submitMaintains">提交</button>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		imgSet,
		setFile
	} from "@/serve/api/imgSet.js"
	import toMaintain from "@/serve/api/toMaintain.js"
	export default {
		data() {
			return {
				elevatorType: "", //直梯带tab切换
				upkeepId: "", //保养清单页面详情id
				imageList: [],
				category: 'image',
				activeTab: 0,
				tabs: ['机房', '层站', '轿厢', '井道'],
				machineList: [], //渲染列表
				updateUpkeep: "", //开关状态
				roomRemark: "", //机房备注
				floorRemark: '', //层站备注
				capsulesRemark: '', //桥箱备注
				shaftRemark: '', //井道备注
				ctx: '', //绘图图像
				points: [], //路径点集合
				roomImg: '', //机房图片
				floorImg: '', //层站图片
				capsulesImg: '', //桥箱图片
				shaftImg: '', //井道上传图片
				Sureflag: false, //
				indexs: 0,
				signatures: '', //签名
				save: true,
				upkeepInfo:'',
			}
		},
		onLoad(e) {
			this.upkeepId = e.upkeepId;
			this.getmachineList(0);
		},
		methods: { 
		
			// 导航切换
			changeTab(index) {
				this.indexs = index
				this.getmachineList(index);
				console.log('当前选中的项：' + index)
			},
			// 开关事件
			switch1Change: function(e) {
				this.updateUpkeepDate(e)
			},
			async updateUpkeepDate(e) {
				let parme = {
					recordId: e
				}
				const res = await toMaintain.updateUpkeepProjectResult(parme)
			},
			//机房上传图片
			async roomImgs() {
				const res = await imgSet("attachment/upload", {
					count: 1,
					izeType: ['copressed']
				})
				this.roomImg = res.data.url
			},
			//层站上传图片
			async floorImgs() {
				const res = await imgSet("attachment/upload", {
					count: 1,
					izeType: ['copressed']
				})
				this.floorImg = res.data.url
			},
			//桥箱上传图片
			async capsulesImgs() {
				const res = await imgSet("attachment/upload", {
					count: 1,
					izeType: ['copressed']
				})
				this.capsulesImg = res.data.url
			},
			//井道上传图片
			async shaftImgs() {
				const res = await imgSet("attachment/upload", {
					count: 1,
					izeType: ['copressed']
				})
				this.shaftImg = res.data.url
			},

			//查询保养清单页面详情接口
			async getmachineList(idn) {
				const res = await toMaintain.selectUpkeepProjectDetails({
					upkeepId: this.upkeepId,
					projectType: idn + 1
				})
				console.log('6555',res)
				this.upkeepInfo = res.data.data.upkeepInfo
				this.elevatorType = res.data.data.elevatorType
				this.machineList = res.data.data.projectList
				uni.setNavigationBarTitle({
				　　title:this.upkeepInfo.elevatorName
				})
				

				
				// console.log(res.data.data.projectList)
			},
			async submitMaintain() {
				// if (this.roomRemark == '') {
				// 	uni.showToast({
				// 		title: '请输入机房备注',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.roomImg == '') {
				// 	uni.showToast({
				// 		title: '请上传机房图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.floorRemark == '') {
				// 	uni.showToast({
				// 		title: '请输入层站备注',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.floorImg == '') {
				// 	uni.showToast({
				// 		title: '请上传层站图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.capsulesRemark == '') {
				// 	uni.showToast({
				// 		title: '请输入桥箱备注',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.capsulesImg == '') {
				// 	uni.showToast({
				// 		title: '请上传桥箱图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.shaftRemark == '') {
				// 	uni.showToast({
				// 		title: '请输入井道备注',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				// if (this.shaftImg == '') {
				// 	uni.showToast({
				// 		title: '请上传井道图片',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.signatures == '') {
					uni.showToast({
						title: '请签名',
						icon: 'none'
					})
					return
				}
				let parme = {
					type: 1,
					upkeepId: this.upkeepId,
					roomRemark: this.roomRemark,
					roomImg: this.roomImg,
					floorRemark: this.floorRemark,
					floorImg: this.floorImg,
					capsulesRemark: this.capsulesRemark,
					capsulesImg: this.capsulesImg,
					shaftRemark: this.shaftRemark,
					shaftImg: this.shaftImg,
					referUserSign: this.signatures,
				}
				const res = await toMaintain.submitUpkeepAuditInfo(parme)
				if (res.data.code == 0) {
					// uni.reLaunch({
					// 	url: '/pages/gird/toMaintain/toMaintain',
					// })
					let pages = getCurrentPages();
					let prvePage = pages[pages.length - 2]
					prvePage.$vm.changeTab(0)
					uni.navigateBack({})
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
				console.log('5565', res)
			},
			//扶梯提交
			async submitMaintains() {
				console.log('llllll', this.signatures)
			
				if (this.roomRemark == '') {
					uni.showToast({
						title: '请输入机房备注',
						icon: 'none'
					})
					return
				}
				if (this.roomImg == '') {
					uni.showToast({
						title: '请上传机房图片',
						icon: 'none'
					})
					return
				}
				
				if (this.signatures == '') {
					uni.showToast({
						title: '请签名',
						icon: 'none'
					})
					return
				}
				let parme = {
					type: 1,
					upkeepId: this.upkeepId,
					roomRemark: this.roomRemark,
					roomImg: this.roomImg,
					referUserSign: this.signatures,
				}
				const res = await toMaintain.submitUpkeepAuditInfo(parme)
				console.log('56556',res)
				if (res.data.code == 0) {
					let pages = getCurrentPages();
					let prvePage = pages[pages.length - 2]
					prvePage.$vm.changeTab(0)
					uni.navigateBack({})
					// uni.reLaunch({
					// 	url: '/pages/gird/toMaintain/toMaintain',
					// })
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			
			},
			rescueComplet() {
				let t = this;
				if(!this.Sureflag){
					this.tip("请签字")
					return
				}
				uni.canvasToTempFilePath({
					// fileType:""
					canvasId: 'mycanvasAdmin',
					success: async function(res) {
						const filest = await setFile('attachment/upload', res.tempFilePath)
						if (filest.code == "0") {
							t.save = false
							t.signatures = filest.data.url
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}

					}
				})
			},

			clear(id) {
				let that = this;
				uni.getSystemInfo({
					success: function(res) { // res - 各种参数
						let info = uni.createSelectorQuery().select(`.${id}`);
						info.boundingClientRect(function(data) { 
							console.log(data)
							that.Sureflag = false;
							that.signatures = ''
							that.ctx.clearRect(0, 0,data.width,data.height)
							that.ctx.draw(true)
						}).exec()
					}
				});
			},
			
			//触摸开始，获取到起点
			touchstart: function(e, id) {
				this.ctx = uni.createCanvasContext(id, this); //创建绘图对象

				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = "round"
				this.ctx.lineJoin = "round"

				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},

			//触摸移动，获取到路径点
			touchmove: function(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				};
				this.Sureflag = true
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend: function() {
				this.points = [];
			},
			/* ***********************************************
			#   绘制笔迹
			#	1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
			#	2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
			#	3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
			************************************************ */
			draw: function() {
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.ctx.moveTo(point1.X, point1.Y)
				this.ctx.lineTo(point2.X, point2.Y)
				this.ctx.stroke()
				this.ctx.draw(true)
			},
		}
	}
</script>

<style scoped>
	.tabs {
		height: 200rpx;
	}

	.v-tabs {}

	.v-tabs__container {
		height: 200rpx !important;
		line-height: 100rpx !important;
	}

	.uni-card {
		width: 670rpx;
		/* height: 820rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		border: none;
		margin-bottom: 30rpx;
	}

	.v-tabs {
		height: 110rpx;
		background-color: #F0F3F6;
	}

	/* 机房 */
	.machine-div {
		/* height: 150rpx; */
		border-bottom: 1px solid #E2E6EF;
		line-height: 30rpx;

	}

	.machine {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.machine image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 19rpx;
	}

	.machine-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #34363D;
	}

	switch {
		transform: scale(0.8, 0.7)
	}

	.remind {
		/* height: 60rpx; */
		margin-left: 55rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #989BA6;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	/* 备注 */
	.comment {
		width: 100%;
		/* height: 226rpx; */
		background: #FFFFFF;
		border-radius: 16rpx;
		border: none;
	}

	.fuck-textarea {
		border: none !important;
	}

	/* 上传图片 */
	.upimage {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		width: 670rpx;
		margin: 0 auto;
		margin-bottom: 50rpx;
	}

	.img {
		padding: 20rpx 0;
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.imgIcon {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
		position: absolute;

		left: 210rpx;
	}

	easy-upload {
		width: 200rpx;
		height: 200rpx;
	}

	/* 提交 */
	button {
		width: 670rpx;
		height: 104rpx;
		background: #017EFE;
		box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(1, 126, 254, 0.2);
		border-radius: 52rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 104rpx;
		margin-top: 100rpx;
		margin-bottom: 69rpx;
	}

	/* 签名画布 */
	/* 画布 */
	/* .signature{
		margin-top: 20rpx;
	} */
	.mycanvas {
		/* width: 100%; */
		width: 300rpx;
		height: 151rpx;
		/* height: calc(100vh - 1200upx); */
		background-color: #ECECEC;
	}

	.x-m-con {
		width: 255rpx;
		/* height: 151rpx; */
		margin: 0 auto;
	}

	.success {
		width: 150rpx;
		height: 56rpx;
		background: #017EFE;
		box-shadow: 0px 5px 10px 0px rgba(1, 126, 254, 0.2);
		border-radius: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.success image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 15rpx;
	}

	.success text {
		color: #FFFFFF;
	}

	.successRight {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.submitOrder {
		padding: 0 20rpx;
		word-spacing: 10rpx;

	}

	.submitOrder text {
		margin: 0 10rpx;
	}
	.f16{
		margin-top: 15px;
		text-align: center;
		font-size: 16px;
		font-weight:bold;
		color: #34363D;
	}
	.flexBottom{
		display: flex;
		align-items: center;
		
	}
	.flexBottom view{
		text-align: center;
		flex: 1;
	}
</style>
